<template>
	<div class="device-details" ref="draggableContainer" :style="{
		left: position.x + 'px',
		top: position.y + 'px',
		right: isDragging ? 'unset' : '63px'
	}">
		<div class="panel-header" @mousedown="startDrag">
			<h3>设备信息</h3>
			<img class="close-btn" src="@/assets/images/close.png" @click="$emit('close')" alt="" />
		</div>
		<div class="panel-content">
			<div class="detail-item">
				<span class="detail-label">· 设备名称：</span>
				<span class="detail-value">{{ device.data.deviceName }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 设备类型：</span>
				<span class="detail-value">{{ device.data.label }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 设备IP：</span>
				<span class="detail-value">{{ device.data.ip }}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 信号强度：</span>
				<span class="detail-value">{{
					device.signal || '不可比较'
				}}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 警告分类：</span>
				<span class="detail-value">{{
					device.broadcast || '未启用'
				}}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 告警条数：</span>
				<span class="detail-value">{{
					device.broadcast || '未启用'
				}}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 响应时间：</span>
				<span class="detail-value">{{
					device.broadcast || '未启用'
				}}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 不可达比率：</span>
				<span class="detail-value">{{
					device.broadcast || '未启用'
				}}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 厂商：</span>
				<span class="detail-value">{{
					device.broadcast || '未启用'
				}}</span>
			</div>
			<div class="detail-item">
				<span class="detail-label">· 主机名称：</span>
				<span class="detail-value">{{
					device.broadcast || '未启用'
				}}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({
	device: {
		type: Object,
		required: true,
	},
})

defineEmits(['close'])

const draggableContainer = ref(null)
const position = ref({ x: 0, y: 221 }) // 默认top保持221px
const isDragging = ref(false)
const startPos = ref({ x: 0, y: 0 })

// 初始化位置
onMounted(() => {
	// 默认靠右显示
	const container = draggableContainer.value
	if (container) {
		const rect = container.getBoundingClientRect()
		position.value = {
			x: window.innerWidth - rect.width - 63, // 63px是原来的right值
			y: 221 // 保持原来的top值
		}
	}
})

const startDrag = (e) => {
	if (e.button !== 0) return

	isDragging.value = true
	startPos.value = {
		x: e.clientX - position.value.x,
		y: e.clientY - position.value.y
	}

	document.body.style.userSelect = 'none'
	window.addEventListener('mousemove', onDrag)
	window.addEventListener('mouseup', stopDrag)
}

const onDrag = (e) => {
	if (!isDragging.value) return

	position.value = {
		x: e.clientX - startPos.value.x,
		y: e.clientY - startPos.value.y
	}
}

const stopDrag = () => {
	isDragging.value = false
	document.body.style.userSelect = ''
	window.removeEventListener('mousemove', onDrag)
	window.removeEventListener('mouseup', stopDrag)
}

onUnmounted(() => {
	window.removeEventListener('mousemove', onDrag)
	window.removeEventListener('mouseup', stopDrag)
})
</script>

<style lang="scss" scoped>
.device-details {
	position: fixed;
	background: linear-gradient(90deg, #085885 0%, #001d30 100%);
	border-radius: 0px 0px 0px 0px;
	border: 2px solid rgba(18, 137, 230, 0.75);
	width: 289px;
	cursor: move;
	z-index: 1000;

	.panel-header {
		display: flex;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #146fb3;
		cursor: move;

		h3 {
			font-weight: bold;
			font-size: 16px;
			color: #ffffff;
			line-height: 19px;
		}

		img {
			width: 20px;
			height: 20px;
			cursor: pointer;
		}
	}

	.panel-content {
		padding: 10px 24px 17px 24px;

		.detail-item {
			font-weight: 400;
			font-size: 14px;
			color: #ffffff;
			line-height: 16px;

			.detail-label {
				display: inline-block;
				width: 110px;
				letter-spacing: 1px;
			}
		}

		.detail-item+.detail-item {
			margin-top: 15px;
		}
	}
}
</style>